/**
 * Created by 丶龟 on 2017/8/25.
 */

"use strict";

//=============
// 引入程序依赖
//=============
import React, { Component } from 'react' ;
import { connect } from 'react-redux' ;
import { Link, browserHistory } from 'react-router' ;
import NetworkEngine from '../../../utils/NetworkEngine' ;
import UrlManager from '../../../utils/UrlManager' ;
import { mapStateToProps, mapDispatchToProps } from './MobileDemandRedux';
import DemandList from "./DemandGroup/DemandList";
import './DemandGroup/DemandList.scss'
import Header from "../../../components/Public/Header/Header"
import searchIcon from "../../../static/img/h5/newSearch.png";

class MobileDemandContainer extends Component{
    constructor(props){
        super(props) ;
        this.state={
            //排序按钮 静态资源
            orderBtnList: [{value:"1",show:'综合排序'},{value:"2",show:'价格排序'},{value:"3",show:'时间排序'}],
            pageSize:1,//页数，默认 1
            list:[],//数据集合
            sortBy : "1",//默认排序 综合
            sortType : "1",
            keyword : '',
            defPageSize : 20
        }
    }

    componentWillMount() {
        this.great();
    }

    componentDidMount() {
        $(".mobile-demand").css("border-bottom",".08rem solid #f7ca0f");
        $(".mobile-demand").css("color","#111111");
        $(".mobile-demand").css("font-weight","500");
        $(".mobile-home").css("border-bottom",".08rem solid #fff");
        let id = sessionStorage.getItem('id');
        if (!id) {
            $(this.refs.height).css("bottom","1.35rem");
        } else {
            $(this.refs.height).css("bottom","0");
            $(this.refs.height).css("overflow-y","visible");
        }
    }

    //初始化首页信息
    initialDemand() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.mobileDemand(),
            {
                sortBy : this.state.sortBy,
                pageNum : this.state.pageSize,
                sortType : this.state.sortType,//排序类型 1 从大到小 降序;"" or null 从小到大生序
                userKeyId:sessionStorage.getItem("userKeyId"),
                keyword:this.state.keyword,
                sourceFlg:"h5",
                defPageSize:this.state.defPageSize
            }
        ).then(
            data => {
                let list = this.state.list;
                function isEmptyObject(e) {
                    if(e.length == 0){
                        return true;
                    }else{
                        return false;
                    }
                }
                if(isEmptyObject(data.data.data)){
                    $(this.refs.nullList).show();
                    $(this.refs.more).hide();
                }else {
                    $(this.refs.nullList).hide()
                    let datas = data.data.data;
                    for (var i = 0; i < datas.length; i++) {
                        list.push(datas[i]);
                    }
                    this.props.initialDemand(list) ;
                    this.setState({
                        pageSize: this.state.pageSize + 1,
                        list: list,
                    })
                    $(this.refs.more).show();
                    if(datas.length<this.state.defPageSize){
                        $(this.refs.nullList).show();
                        $(this.refs.more).hide();
                    }
                }
            }
        ).catch(
            err => {
            }
        )
    }

    keySearch(e) {
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == "13") {
            this.Search();
        }
    }
    Search(){
        MtaH5.clickStat('h5_search');
        this.state.list = [];
        this.state.pageSize = 1;
        this.props.initialDemand([]) ;
        this.state.keyword =this.refs.searchText.value;
        this.initialDemand();
    }

    great(){
        this.initialDemand();
    }

    render(){
        return(
            <div>
                <div className="h5-wrapper-demand"  ref="height">
                    <Header/>
                    <div className="h5-content new-content">

                        <div className="h5-editor">
                            <div className="search">
                                <img src={searchIcon} onClick={this.Search.bind(this)}/>
                                <input ref="searchText" type="text" placeholder="搜索项目" onKeyDown={this.keySearch.bind(this)}/>
                            </div>
                            {
                                this.props.demandList.map((data, i) => {
                                    return <DemandList
                                        key={i}
                                        taskId={data.taskId}
                                        taskTypeName={data.taskTypeName}
                                        taskSubtypeName={data.taskSubtypeName}
                                        taskTitle={data.taskTitle}
                                        status={data.status}
                                        statusName={data.statusName}
                                        preBudgetFrom={data.preBudgetFrom}
                                        preBudgetTo={data.preBudgetTo}
                                        insertDatetime={data.insertDatetime}
                                        taskContent={data.taskContent}
                                        taskCreateorId={data.taskCreateorId}
                                        createorHeadUrl={data.createorHeadUrl}
                                        displayName={data.displayName}
                                        registCount={data.registCount}
                                        authenticationType={data.authenticationType}
                                    />
                                })
                            }
                        </div>
                        <div ref="nullList" className="m-tip" style={{display:"none"}}>没有更多数据</div>
                        <div ref="more" className="more-btn" style={{display:"none"}} onClick={this.great.bind(this)}>加载更多</div>
                    </div>
                </div>
                {
                    (sessionStorage.getItem('id'))?<link></link>:<Link to="/Login"><button className="join-us orange-btn">加入我们</button></Link>
                }
            </div>
        )
    }
}

const MobileDemand = connect(mapStateToProps, mapDispatchToProps)(MobileDemandContainer) ;

export { MobileDemand as default } ;
